<template>
  <body>
    <div id="register">
      <div class="native">
        <div class="title">
          <img src="../../assets/Logo.jpeg" alt="logo" />
          <h2>四川省志愿填报系统</h2>
        </div>
        <div class="others">
          <router-link href="#" to="/login">返回登录</router-link>
        </div>
        <div class="exit">
          <router-link href="#" to="/">返回首页</router-link>
        </div>
      </div>
      <div class="registerArea">
        <div class="header">
          <el-divider content-position="center">重置密码</el-divider>
        </div>
        <div class="inputArea">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 邮箱 -->
            <el-form-item prop="email" label="邮箱">
              <el-input
                type="text"
                v-model="ruleForm.email"
                autocomplete="off"
                placeholder="请输入邮箱号"
              ></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="code" label="验证码">
              <el-input
                prop="code"
                class="yanzheng"
                type="text"
                v-model="ruleForm.code"
                autocomplete="off"
                placeholder="请输入验证码"
              ></el-input>
              <button
                @click="getEmailCode()"
                class="code-btn getYZ"
                :disabled="!show"
              >
                <span v-show="show">立即获取</span>
                <span v-show="!show" class="count">{{ count }} s后重发</span>
              </button>
              <!-- 密码 -->
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
                placeholder="请输入确认密码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <button class="submit" @click="reset()">提交</button>
      </div>
    </div>
  </body>
</template>

<script>
const TIME_COUNT = 120; // 设置一个全局的倒计时的时间
import qs from "qs";
import Base64 from "base-64";
export default {
  data() {
    // 验证输入是否为空
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      }
    };
    var validateCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      }
    };
    return {
      // 显示立即获取 或 倒计时
      show: true,
      // 有效时长 60 或 120
      count: "",
      // 倒计时
      timer: null,
      // 输入表单
      ruleForm: {
        email: "",
        code: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        email: [{ validator: validateEmail, trigger: "blur" }],
        check: [{ validator: validateCheck, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 获得验证码
    getEmailCode() {
      // var _this = this;
      if (this.ruleForm.email === "") {
        this.$message.error("请输入邮箱");
      } else {
        this.$axios
          .post(
            "/getCheckCode",
            qs.stringify({
              email: this.ruleForm.email,
            }),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            }
          )
          .then((res) => {
            console.log(res);
          });
        // 验证码倒计时效果
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
    // 重置密码
    reset() {
      this.$axios
        .post(
          "/forgetPwd",
          qs.stringify({
            email: this.ruleForm.email,
            code: this.ruleForm.code,
            newPassword: Base64.encode(this.ruleForm.pass),
          })
        )
        .then((res) => {
          this.$message.success("成功重置密码");
          this.$router.replace("/login");
        });
    },
  },
};
</script>

<style scoped>
body {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url("../../assets/LoginBack.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

.native {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: row;
}

.title {
  position: relative;
  width: 300px;
  height: 100px;
  line-height: 100px;
  margin-top: 30px;
  left: 50%;
  margin-left: -150px;
  text-align: center;
}

.title img {
  float: left;
  width: 40px;
  padding-top: 30px;
}

.title h2 {
  float: left;
  margin-left: 15px;
  height: 100px;
  line-height: 100px;
}

.exit,
.others {
  width: 100px;
  position: absolute;
  top: 50px;
  right: 100px;
  font-size: 18px;
  cursor: pointer;
}

.others {
  right: 200px;
}

.registerArea {
  position: relative;
  width: 660px;
  height: 500px;
  left: 50%;
  margin-left: -330px;
}

.registerArea .header {
  width: 100%;
  height: 50px;
  display: flex;
}

.el-divider__text {
  background-color: transparent;
  font-size: 20px;
  font-weight: bold;
}

.header span {
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  right: 20px;
}

.inputArea {
  position: relative;
  margin-top: 40px;
  width: 370px;
  left: 50%;
  margin-left: -175px;
  height: 250px;
  margin-bottom: 30px;
}

.demo-ruleForm {
  position: relative;
  width: 400px;
  left: 50%;
  margin-left: -250px;
}

.el-input {
  width: 300px;
}

.yanzheng {
  width: 200px;
}

.getYZ {
  color: white;
  width: 92px;
  height: 40px;
  background-color: rgba(255, 101, 0);
  border-radius: 5px;
}

.agree {
  margin-top: 5px;
  width: 200px;
  height: 30px;
  margin-left: 145px;
  margin-bottom: 10px;
}

.submit {
  position: relative;
  color: white;
  width: 340px;
  height: 35px;
  background-color: rgba(255, 101, 0);
  left: 50%;
  margin-left: -183px;
}
</style>